<template>
  <div class="login">
    <div>
      <img src="../assets/img/login-1.png" mode="" />
    </div>
    <div></div>
    <div>
      <div>
        <div>{{ $t("route.logo") }}</div>
        <div>{{ $t("route.logon") }}</div>
        <div>
          <label>{{ $t("route.account") }}</label>
          <input v-model="mobile" />
        </div>
        <div>
          <label>{{ $t("route.password") }}</label>
          <input type="password" v-model="password" />
        </div>
        <div>
          <el-checkbox v-model="isRemberPwd" :checked="true" class="cb-remember">{{
            $t("route.Rpassward")
          }}</el-checkbox>
        </div>
        <button class="btn-login" @click="loginClick">{{ $t("route.Login") }}</button>
        <div>
          <!-- <button id="qqLoginBtn" class="btn-login">QQ登录</button> -->
        </div>
      </div>
      <!-- <div>
        <wxlogin
          v-if="false"
          class="wx-kogin"
          :href="'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7CiAgICAgICAgICBib3JkZXI6IG5vbmU7CiAgICAgICAgICB3aWR0aDogMTQwcHg7CiAgICAgICAgICBoZWlnaHQ6IDE0MHB4OwogICAgICAgIH0='"
          appid="wxdc4cd4c40b12e357"
          :scope="'snsapi_login'"
          :theme="'white'"
          :redirect_uri="encodeURIComponent('http://www.hxwl.top/youke-admin-web')"
          rel="external nofollow"
        >
        </wxlogin>
      </div> -->
    </div>

    <el-button @click="lnClick" class="ln">{{ btnTxt }}</el-button>
  </div>
</template>
<script>
import http from "../js/http/http.js";
import api from "../js/http/api.js";
import CommonUtils from "../js/common/common-utils.js";
import md5 from "../js/common/md5.js";
import QRCode from "qrcodejs2";
// import wxlogin from "vue-wxlogin";
import Constant from "../js/common/constant";
import { ElMessageBox } from "element-plus";
export default {
  // components: {
  //   wxlogin,
  // },
  data() {
    return {
      mobile: null,
      password: null,
      btnTxt: "英文",
      wechatLogUrl: null,
      name: null,
      isRemberPwd: true,
    };
  },
  methods: {
    inputIpClick() {
      ElMessageBox.prompt("IP地址修改", "IP修改", {
        confirmButtonText: "确定",
      }).then(({ value }) => {
        Constant.SERVER_IP = value;
        api.BASE_URI = "http://" + Constant.SERVER_IP + ":6801/hikari-cloud";
      });
    },
    lnClick() {
      if (this.$i18n.locale == "zh") {
        this.$i18n.locale = "en";
        this.$store.commit("setLanguage", "en");
        this.btnTxt = "中文";
      } else {
        this.$i18n.locale = "zh";
        this.$store.commit("setLanguage", "zh");
        this.btnTxt = "英文";
      }
      console.log(this.$i18n.locale);
    },

    loginClick() {
      if (CommonUtils.isEmpty(this.mobile)) {
        this.$message.error(this.$t("route.phone"));
        return;
      }
      if (CommonUtils.isEmpty(this.password)) {
        this.$message.error(this.$t("route.Password_cannot_be_empty"));
        return;
      }
      http.post(
        api.WEB_LOGIN,
        {
          mobile: this.mobile,
          password: md5(this.password),
          name: this.name,
        },
        (data) => {
          this.$message.success(this.$t("route.Login_succeeded"));
          this.$store.commit("setUser", data.data);
          this.$store.commit("setToken", data.data.token);
          this.$store.commit("setMobile", this.mobile);
          this.$store.commit("setPassword", this.password);
          CommonUtils.setCookie("mobile", this.mobile);
          CommonUtils.setCookie("password", this.password);

          if (data.data.type == 0) {
            this.$router.push({
              path: "/admin/home",
            });
          } else if (data.data.type == 1) {
          } else if (data.data.type == 2) {
            this.$router.push("/home");
          }
          window.removeEventListener("keydown", this.keyDown, false);
        }
      );
    },
    keyDown(e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode === 13) {
        this.loginClick(); // 需要执行的方法方法
      }
    },
  },
  getWeChatQrCode() {
    http.post(api.GET_WECHAT_QRCODE, null, (data) => {
      // this.creatQrCode(data.data);
      this.wechatLogUrl = data.data;
    });
  },
  creatQrCode(text) {
    new QRCode(this.$refs.qrCodeUrl, {
      text: text, // 需要转换为二维码的内容
      width: 200,
      height: 200,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H,
    });
  },
  mounted() {
    // QC.Login({
    //   btnId: 'qqLoginBtn'
    // })
    // QC.Login.getMe(unionId => { console.log('============' + unionId) })
  },
  created() {
    this.btnTxt = this.$i18n.locale == "zh" ? "英文" : "中文";
    this.mobile = CommonUtils.getCookie("mobile");
    console.log("====== this.mobile=======" + this.mobile);
    this.password = CommonUtils.getCookie("password");
    // this.getWeChatQrCode();
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    console.log("======deactivated======");
    window.removeEventListener("keydown", this.keyDown, false);
  },
};
</script>

<style lang="scss" scoped>
.login {
  background-color: #00062b;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 100vh;

  > div:nth-of-type(1) {
    text-align: right;
    flex: 1;
    margin-right: 100px;

    > img {
      width: 428px;
      height: 573px;
    }
  }

  > div:nth-of-type(2) {
    background-color: #aaa;
    height: 35%;
    width: 1px;
  }

  > div:nth-of-type(3) {
    flex: 1;
    display: flex;
    align-items: center;

    > div:nth-of-type(1) {
      padding-left: 50px;

      > div:nth-of-type(1),
      > div:nth-of-type(2) {
        font-size: 30px;
      }

      > div:nth-of-type(3),
      > div:nth-of-type(4) {
        border-bottom: 1px solid #fff;
        width: 330px;
        margin-top: 30px;

        > label {
          font-size: 18px;
        }

        > input {
          padding-left: 10px;
          width: 270px;
          height: 30px;
          background-color: transparent;
          border: none;
          outline: none;
          color: #fff;
          font-size: 20px;
        }
      }

      > div:nth-of-type(5) {
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        width: 330px;

        .cb-remember {
          flex: 1;
        }

        > div {
          flex: 1;
          text-align: right;
        }
      }

      .btn-login {
        margin-top: 20px;
        width: 330px;
        height: 35px;
        background-color: #3956ea;
        border-radius: 15px;
      }
    }

    > div:nth-of-type(2) {
      // text-align: center;
      padding-left: 50px;

      .wx-kogin {
        // transform: scale(0.7);
        // .impowerBox .title {
        //   display: none;
        // }

        // .impowerBox .status.status_browser {
        //   display: none;
        // }

        .impowerBox .qrcode {
          border: none;
          width: 140px;
          height: 140px;
        }

        .impowerBox.status {
          display: none;
        }
      }
    }
  }

  .ln {
    position: absolute;
    top: 40px;
    right: 40px;
  }
}
</style>
